var dataGroup=[
    {
        groupUrl:"images/1.jpg",
        groupTitle:"图片1",
        groupWorld:"图片1",
        groupBg:"images/1.jpg",
        groupBgTitle:"图片1",
        
    },
    {
        groupUrl:"images/2.jpg",
        groupTitle:"图片2",
        groupWorld:"图片2",
        groupBg:"images/2.jpg",
        groupBgTitle:"图片2",
        
    },
    {
        groupUrl:"images/3.jpg",
        groupTitle:"图片3",
        groupWorld:"图片3",
        groupBg:"images/3.jpg",
        groupBgTitle:"图片3",
        
    },
    {
        groupUrl:"images/4.jpg",
        groupTitle:"图片4",
        groupWorld:"图片4",
        groupBg:"images/4.jpg",
        groupBgTitle:"图片4",
        
    },
    {
        groupUrl:"images/5.jpg",
        groupTitle:"图片5",
        groupWorld:"图片5",
        groupBg:"images/5.jpg",
        groupBgTitle:"图片5",
        
    },
    {
        groupUrl:"images/6.jpg",
        groupTitle:"图片6",
        groupWorld:"图片6",
        groupBg:"images/6.jpg",
        groupBgTitle:"图片6",
        
    },
    {
        groupUrl:"images/7.jpg",
        groupTitle:"图片7",
        groupWorld:"图片7",
        groupBg:"images/7.jpg",
        groupBgTitle:"图片7",
        
    },
];

var g_content=document.getElementById('g-content')
var group_contentWord = document.getElementsByClassName("contentWord");//文字数组
var group_contentPic = document.getElementsByClassName("contentPic");//图片数组
var group_j_slideTags = document.getElementById("j_slideTags");//子项列表
var group_anchor = group_j_slideTags.getElementsByTagName("li");//子项


for(var i=0,groupLen=dataGroup.length;i<groupLen;i++){
    // group_j_slideTags.innerHTML +='<li> <div class="innerImg"><img src="'+dataGroup[i].groupUrl+'"></div> <p>'+dataGroup[i].groupBgTitle+'</p></li>';
    g_content.innerHTML +='<div class="contentWord"><h2>'+dataGroup[i].groupTitle+'</h2><p>'+dataGroup[i]. groupWorld+'</p></div>';
}
for(var i=0,groupLen=dataGroup.length;i<groupLen;i++){
    g_content.innerHTML +=' <div class="contentPic"><img src="'+dataGroup[i].groupUrl+'"></div>';
    group_j_slideTags.innerHTML +='<li> <div class="innerImg"><img src="'+dataGroup[i].groupBg+'"></div> <p>'+dataGroup[i].groupBgTitle+'</p></li>';
}

//点击列表显示指定子项
for(let i=0,li_len=group_anchor.length;i<li_len;i++){
    group_anchor[i].onclick=function(){
        //清空样式
        for(let j=0,word_len=group_contentWord.length;j<word_len;j++){
            group_contentWord[j].style.display="none";
        }
        //清空样式
        for(let k=0,pic_len=group_contentPic.length;k<pic_len;k++){
            group_contentPic[k].style.display="none";
        }
        group_contentWord[i].style.display="block";//显示指定项文字内容
        group_contentWord[i].style.animation = "group_word_move 1s ease-out";
        group_contentPic[i].style.display="block";//显示指定项图片内容
        group_contentPic[i].style.animation = "group_pic_move 1s ease-out";
    }
}